<template>
  <div class="about">

    <h1>This is an about page</h1>
    <el-button type="primary">你好</el-button>
    <el-Row>
      <el-col :xs="24"
              :md="12"
              :span="2">234</el-col>
      <el-col :span="8">234</el-col>
      <el-col :span="14">234</el-col>
    </el-Row>

    <el-container>
      <el-header> <i style="color:skyblue;"
           class="el-icon-eleme"></i> 1231</el-header>
      <el-button :loading="true"
                 icon="el-icon-edit"
                 type="success">你好</el-button>
      <el-button type="danger"
                 round
                 plain>你好</el-button>
    </el-container>
    <el-button type="text">收到</el-button>
    <el-button native-type="submit"
               type="success"></el-button>
    <el-button-group>
      <el-button>你</el-button>
      <el-button>你1</el-button>
      <el-button>你2</el-button>
    </el-button-group>
    <el-link icon="el-icon-edit"
             type="success">你好</el-link>

    <el-radio v-model="radio"
              label="1">备选项</el-radio>
    <el-radio v-model="radio"
              label="2">备选项</el-radio>
    <el-radio-group v-model="mylive">
      <el-radio border
                label="吃饭">吃</el-radio>
      <el-radio border
                label="睡觉">吃</el-radio>
      <el-radio border
                label="玩游戏">吃</el-radio>
      <el-radio-button label="看视频">追剧</el-radio-button>
    </el-radio-group>
    <h1>{{mylive}}</h1>
    <el-checkbox v-model="checked"></el-checkbox>
    <el-checkbox :indeterminate="isIndeterminate"
                 v-model="checkAll"
                 @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkList"
                       @change="handleCheckedCitiesChange">
      <el-checkbox v-for="item in list"
                   :key="item"
                   :label="item">{{item}}</el-checkbox>
    </el-checkbox-group>
    <h1>{{checkList}}</h1>
    <el-input clearable
              show-password
              v-model="msg"></el-input>

    <el-input suffix-icon="el-icon-date"
              prefix-icon="el-icon-search">

    </el-input>
    <el-input type="textarea">
      <i slot="suffix"
         class="el-input__icon el-icon-date"></i>
    </el-input>
    <el-input>
      <template slot="prepend">
        <div>
          密码：
        </div>
      </template>
    </el-input>
    <input type="text">

    <div class="sub-title">输入后匹配输入建议</div>
    <el-autocomplete class="inline-input"
                     v-model="state2"
                     :fetch-suggestions="querySearch"
                     placeholder="请输入内容"
                     :trigger-on-focus="false"
                     @select="handleSelect"></el-autocomplete>
    <div style="margin-bottom:300px;"></div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      state2: "",
      msg: "",
      radio: '1',
      mylive: "",
      checked: true,
      list: ["北京", "上海", "广州", "曹县"],
      checkList: [], //选中的数据
      checkAll: false,//全选的状态
      isIndeterminate: true,
      restaurants: [],//筛选出的数据
      restaurant: [{ value: "今天星期四" }, { value: "明天星期五" }, { value: "我是周武" }]
    }
  },
  methods: {
    querySearch (queryString, cb) {
      // queryString 当前输入的值 
      console.log(queryString, cb)
      var restaurant = this.restaurant; //所有的数据
      var results = []//筛选出的建议
      if (queryString) {
        console.log(restaurant)
        results = restaurant.filter((ele, index) => {
          console.log(ele)
          return ele.value.indexOf(queryString) > -1
        })
      } else {
        results = restaurants;
      }
      console.log(results)
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    handleSelect () { },
    handleCheckAllChange (val) {
      console.log(val)
      this.checkList = val ? this.list : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange (val) {
      console.log(val)
      let checkedCount = val.length;//当前选中的数据长度
      this.checkAll = checkedCount === this.list.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkList.length;
    }
  },
  created () {
    this.$notify({
      title: '成功',
      message: '这是一条成功的提示消息',
      type: 'success'
    })
  },
}
</script>
<style lang="less">
.el-row {
  .el-col {
    background: skyblue;
    border: 2px solid red;
  }
}
</style>  